<template>
	<div class="details">
		<!-- <div class="details_top">
			<p>{{ title }}</p>
		</div> -->
		<div class="details_main">
			<div class="details_main_left">
				<section v-if="!isOutsideOrg">
					<div>
						<span class="left">{{
							$t('personalCenter.addressBookName', '通讯录姓名')
						}}</span>
						<span class="right">{{ formState.employee_en_name }}</span>
					</div>
					<div>
						<span class="left">{{
							$t('personalCenter.jobNumber', '工号')
						}}</span>
						<span class="right">{{ formState.employee_card }}</span>
					</div>
					<div>
						<span class="left">{{
							$t('personalCenter.jobTitle', '职务')
						}}</span>
						<span class="right">{{ formState.sequence }}</span>
					</div>
					<Avatar
						:formState="formState"
						:userData="userData"
						@restoreDefault="restoreDefault"
						@onUpload="onUpload"
					/>
				</section>
				<section v-else>
					<div>
						<span class="left">{{ $t('personalCenter.ID', 'ID') }}</span>
						<span class="right">{{ formState.employee_id }}</span>
					</div>
					<div>
						<span class="left">{{ $t('personalCenter.name', '姓名') }}</span>
						<span class="right">{{ formState.employee_name }}</span>
					</div>
					<Avatar
						:formState="formState"
						:userData="userData"
						@restoreDefault="restoreDefault"
						@onUpload="onUpload"
					/>
				</section>
			</div>

			<div class="details_main_right">
				<section v-if="!isOutsideOrg">
					<div>
						<span class="left">{{
							$t('personalCenter.organizationAccountNumber', '组织账号')
						}}</span>
						<span class="right">{{ formState.employee_id }}</span>
					</div>
					<div
						v-if="
							isAccountLogin &&
							create_source !== 'PTM' &&
							!pas_status &&
							!puc_status
						"
					>
						<span class="left">{{
							$t('personalCenter.organizationLoginPassword', '组织登录密码')
						}}</span>
						<div class="pwd-container" v-if="isSetPwd">
							<span class="right_modify" @click="changePwd">{{
								$t('personalCenter.changePassword', '修改密码')
							}}</span>
							<i
								class="low-code iconbianji6-Blue"
								@click="changePwd"
								style="cursor: pointer"
							></i>
						</div>

						<div class="pwd-container" v-else>
							<span class="right_modify" @click="changePwd">{{
								$t('personalCenter.SetPassword', '设置密码')
							}}</span>
							<i
								class="low-code iconyyzy-shezhi"
								@click="changePwd"
								style="cursor: pointer"
							></i>
						</div>
					</div>
					<!-- 部门 -->
					<div v-if="onDept">
						<div style="display: flex" v-if="oneDept">
							<span class="left">{{
								newOrgOn
									? $t('personalCenter.Department', '组织')
									: $t('personalCenter.Department', '部门')
							}}</span>
							<ul style="display: inline-block">
								<li v-for="item in administrationList?.rows" :key="item">
									<span class="org-name" :title="item.dept_name_path">{{
										item.dept_name_path
									}}</span>
									<span
										class="org-type"
										v-if="item.main_dept_flag && !ifshowMain"
										>（{{ $t('personalCenter.main', '主') }}）</span
									>
									<span
										class="org-utype"
										v-if="!item.main_dept_flag && ifshowMain"
										>（{{ $t('personalCenter.partTime', '兼') }}）</span
									>
								</li>
								<span
									class="view-all"
									v-if="administrationList?.page.total_count > 5"
									@click="showOrgList('1', true)"
									>查看全部 &gt;</span
								>
							</ul>
						</div>
						<div v-else>
							<!-- 行政部门 -->
							<div style="display: flex" v-if="isDept">
								<span class="left">{{
									newOrgOn
										? $t('personalCenter.Department', '组织')
										: $t('personalCenter.Department', '部门')
								}}</span>
								<ul style="display: inline-block">
									<li v-for="item in administrationList?.rows" :key="item">
										<span class="org-name" :title="item.dept_name_path">{{
											item.dept_name_path
										}}</span>
										<span
											class="org-type"
											v-if="item.main_dept_flag && !ifshowMain"
											>（{{ $t('personalCenter.main', '主') }}）</span
										>
										<span
											class="org-utype"
											v-if="!item.main_dept_flag && ifshowMain"
											>（{{ $t('personalCenter.partTime', '兼') }}）</span
										>
									</li>
									<span
										class="view-all"
										v-if="administrationList?.page.total_count > 5"
										@click="showOrgList('1', false)"
										>查看全部 &gt;</span
									>
								</ul>
							</div>
						</div>
					</div>
				</section>
				<section v-else>
					<div>
						<span class="left">{{ $t('personalCenter.Phone', '手机号') }}</span>
						<span class="right">{{ formState.phone }}</span>
					</div>
					<div>
						<span class="left">{{ $t('personalCenter.Email', '邮箱') }}</span>
						<span class="right">{{ formState.email }}</span>
					</div>
					<div style="display: flex">
						<span class="left">{{
							$t('personalCenter.Organization', '所在组织')
						}}</span>
						<ul style="display: inline-block">
							<li v-for="item in outsideOrgList" :key="item">
								<span class="org-name" :title="item.dept_name">{{
									item.dept_name
								}}</span>
							</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
	<Mask v-if="showShade">
		<template #box>
			<modify-login-pwd @close="close"></modify-login-pwd>
		</template>
	</Mask>
	<uploade-img
		ref="eleTable"
		v-model:isOpen="isOpen"
		v-if="isOpen"
		:formData="userData"
		@imgUrl="imgUrl"
	></uploade-img>
	<Mask v-if="isShowChangeOrg">
		<template #box>
			<changeOrg
				:isPersonalCenter="true"
				:isOutsideOrg="isOutsideOrg"
				:labelId="OrglabelId"
				:orgDetail="orgDetail"
				:isDept="oneDept"
			>
				<template #changeOrgTitle>
					<p class="change-org-title">
						<span>全部{{ orgListTitle }}组织</span>
						<span @click="isShowChangeOrg = false">×</span>
					</p>
				</template>
			</changeOrg>
		</template>
	</Mask>
</template>
<script lang="ts">
import {
	defineComponent,
	reactive,
	onMounted,
	ref,
	createVNode,
	computed,
} from 'vue'
import { useStore } from 'vuex'
import { apiInit } from '@/services'
import message from 'ant-design-vue/lib/message'
import { Modal } from 'ant-design-vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import modifyLoginPwd from '../messageBox/modifyPwd.vue'
import Avatar from './components/avatar.vue'
import UploadeImg from './components/UploadeImg.vue'
import Mask from '../mask/index.vue'
import changeOrg from '@/entry_desktop/components/ChangeOrg/changeOrg.vue'
import { i18n } from '@/locales'
import axios from 'axios'
import { path } from '@/utils'
const { $t } = i18n

export default defineComponent({
	props: {
		title: {
			type: String,
			required: true,
		},
		data: {
			type: Array,
		},
	},
	components: { UploadeImg, Mask, modifyLoginPwd, Avatar, changeOrg },
	setup() {
		const store = useStore()
		const showShade = ref(false)
		const isOpen = ref(false)
		const eleTable = ref()
		const userData: any = ref({})
		const isSetPwd = computed(() => store.state.userInfo.has_set_pwd)
		const orgDetail = computed(() => store.state.userInfo)
		const isBtmOrg = ref()
		const deptHide = ref()
		const businessDeptHide = ref()
		//判断部门
		const onDept: any = ref(false)
		const oneDept: any = ref(false)
		const isDept: any = ref(true)
		const formState: any = reactive({
			isShow: true,
			layout: 'vertical',
			employee_en_name: '',
			employee_id: '',
			department_name: '',
			sequence: '',
			employee_card: '',
			avatar_url: '',
			email: '',
			gender: '',
			employee_name: '',
		})
		const employee_name = ref('')
		//业务组织开启
		const newOrgOn = computed(() => store.state.tenant?.tenant_auth?.biz_org)
		const isOutsideOrg: any = computed(
			() => store.state.userInfo.org_type === 'EXTERNAL'
		)
		const isAccountLogin = computed(() =>
			store.state.tenant.login_types.split(',').includes('0')
		)
		const ifshowMain = computed(
			() => store.state.tenant.security_config_map.main_lable_hide
		)
		const create_source = ref()
		const pas_status = ref()
		const puc_status = ref()
		const isShowChangeOrg = ref(false)
		const OrglabelId = ref('')
		const orgListTitle = ref('')
		const administrationList = ref()
		const businessList = ref()
		const outsideOrgList = ref()
		const showOrgList = (labelId: string, isDept: boolean) => {
			if (labelId === '1') {
				orgListTitle.value = '行政'
			} else if (labelId === '2') {
				orgListTitle.value = '业务'
			}

			OrglabelId.value = labelId
			isShowChangeOrg.value = true
		}

		// const label = ['组织账号', '组织登录密码', '通讯录姓名', '工号']
		// const label2 = ['部门','职务','头像']
		// const arr = ['123', '12456', '65747', '7678678']
		const api = apiInit()
		const onUpload = () => {
			isOpen.value = true
		}
		const imgUrl = (url: any) => {
			userData.value.avatar_url = url
			onSave(url)
		}
		const onSave = async (url: any) => {
			const params: any = {
				file_name: 'img.png',
				img_str: url,
			}
			const result: any = await api.default.UpdateAvatarBaseUserPrivateV2POST({
				payload: params,
			})
			if (result.code === '000000') {
				message.success(
					$t('personalCenter.SuccessfullyModified', '修改成功'),
					1.5
				)
				init()
				window.location.reload()
			} else {
				message.error(result.message, 1.5)
			}
		}
		// 获取当前登陆人信息
		const init = async () => {
			// const { data, code } = await api.default.GetCurrentUserUserPrivateV2GET({})

			// const { data, code }: any =
			// 	await api.baseAuto.GetCurrentUserEmployeePrivateV1POST({}) //新
			// if (code === '000000') {
			const data = orgDetail.value
			if (data !== undefined) {
				//数据处理
				if (data.sys_admin) {
					data.sys_admin = true
					data.app_admin = true
					data.manage_admin = true
				} else if (data.external_user !== true) {
					data.sys_admin = false //处理1
					if (!isOutsideOrg.value) {
						var isAppAdmin
						isAppAdmin = await api.default.IsAppAdminUserPrivateV2GET({}) //处理2
						data.app_admin = isAppAdmin?.data //处理2
					}

					var isManageAdmin = await api.default.IsManageAdminUserPrivateV2GET(
						{}
					) //处理3
					data.manage_admin = isManageAdmin.data //处理3
				}

				userData.value = data
				const {
					employee_en_name,
					employee_id,
					email,
					department_name,
					sequence,
					avatar_url,
					gender,
					employee_name,
					employee_card,
					phone,
				}: any = data
				;[
					formState.employee_name,
					formState.avatar_url,
					formState.employee_en_name,
					formState.employee_id,
					formState.department_name,
					formState.sequence,
					formState.email,
					formState.employee_card,
					formState.gender,
					formState.phone,
				] = [
					employee_name,
					avatar_url,
					employee_en_name,
					employee_id,
					department_name,
					sequence,
					email,
					employee_card,
					gender,
					phone,
				]
			}
			fetchOutsideList()
		}
		// 恢复默认
		const restoreDefault = () => {
			Modal.confirm({
				title: $t(
					'personalCenter.areYouSureToChange',
					'确定将头像改为默认头像？'
				),
				icon: createVNode(QuestionCircleOutlined),
				okText: $t('personalCenter.confirm', '确认'),
				cancelText: $t('personalCenter.cancel', '取消'),
				onOk() {
					return new Promise((resolve, reject) => {
						setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
						onSave('')
					}).catch(() => console.log('Oops errors!'))
				},
			})
		}
		// 修改密码
		const changePwd = () => {
			showShade.value = true
		}
		// 关闭弹框
		const close = (val: boolean) => {
			showShade.value = val
		}
		const fetchOrgList = async () => {
			;[administrationList.value, businessList.value] = await Promise.all([
				api.baseAuto.PageInternalMulDeptPrivateV1POST({
					payload: {
						dept_name_like: '',
						employee_id: '',
						label_id: '1',
						page_index: 1,
						page_size: 5,
						tenant_id: '',
					},
				}),
				api.baseAuto.PageInternalMulDeptPrivateV1POST({
					payload: {
						dept_name_like: '',
						employee_id: '',
						label_id: '2',
						page_index: 1,
						page_size: 5,
						tenant_id: '',
					},
				}),
			])
		}
		const fetchOutsideList = async () => {
			let { data, code, msg } =
				await api.baseAuto.ListExternalMulDeptPrivateV1POST({})
			if (code === '000000') {
				outsideOrgList.value = data
			} else {
				message.error(msg)
			}
		}

		onMounted(async () => {
			const tenantDetail = JSON.parse(
				localStorage.getItem('tenantDetail') || ''
			)
			formState.isShow = tenantDetail.data.user_source_type === fetchOrgList()
			isBtmOrg.value = tenantDetail.data.tenant_auth.user_org_switch
			deptHide.value = !tenantDetail.data.security_config_map.dept_hide
			businessDeptHide.value =
				!tenantDetail.data.security_config_map.business_dept_hide
			if (isBtmOrg.value) {
				if (deptHide.value) {
					if (businessDeptHide.value) {
						onDept.value = true
						oneDept.value = false
						isDept.value = true
					} else {
						onDept.value = true
						oneDept.value = true
					}
				} else {
					if (businessDeptHide.value) {
						onDept.value = true
						oneDept.value = false
						isDept.value = false
					} else {
						onDept.value = false
					}
				}
			} else {
				if (deptHide.value) {
					onDept.value = true
					oneDept.value = true
				} else {
					onDept.value = false
				}
			}
			init()

			let res = await axios({
				method: 'POST',
				url: path.getFullPath(
					`/ego_base_info/api/public/tenant/getPlatformInfo`
				),
			})

			if (res.data.code === '000000') {
				create_source.value = res.data.data.create_source
				pas_status.value = res.data.data.pas_status
				puc_status.value = res.data.data.puc_status
			}
		})

		return {
			formState,
			employee_name,
			// label,
			// arr,
			isOpen,
			eleTable,
			onUpload,
			userData,
			imgUrl,
			onSave,
			changePwd,
			showShade,
			restoreDefault,
			close,
			isSetPwd,
			isAccountLogin,
			isShowChangeOrg,
			OrglabelId,
			orgListTitle,
			isOutsideOrg,
			newOrgOn,
			administrationList,
			outsideOrgList,
			businessList,
			showOrgList,
			orgDetail,
			ifshowMain,
			onDept,
			oneDept,
			isDept,
			puc_status,
			pas_status,
			create_source,
		}
	},
})
</script>
<style lang="less" scoped>
.low-code {
	width: 18px;
	height: 18px;
	margin-left: 8px;
	color: var(--bl-brand-c);
}
.details {
	width: 100%;
	background-color: #fff;
	border-radius: 6px;
	.details_top {
		padding-left: 29px;
		height: 61px;
		line-height: 61px;
		border-bottom: 1px solid #e8eaed;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 17px;
		color: #1f2329;
	}
	.details_main {
		display: flex;
		justify-content: space-between;
		width: 100%;
		// height: 284px;
		.view-all {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 35px;
			color: #646a73;
			cursor: pointer;
		}

		.details_main_left {
			margin: 32px 0px 32px 30px;
			width: 50%;
			// height: 219px;
			// background-color: #ccc;
			border-right: 1px solid #e8eaed;
			div {
				margin-bottom: 24px;
				// height: 32px;
				// line-height: 32px;
				// border:1px solid #1F2329;
				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: inline-block;
					width: 120px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #8f959e;
				}

				.right {
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 14px;
				}
				.right_modify {
					color: var(--bl-brand-c);
					cursor: pointer;
				}
				.pwd-container {
					display: inline-block;
				}
				.icon_edit {
					display: inline-block;
					margin-left: 10.05px;
					width: 19.34px;
					height: 23.57px;
					vertical-align: middle;
					background-image: url(/public/icon/edit.svg);
				}
			}
		}
		.details_main_right {
			margin: 32px 0px 32px 30px;
			width: 50%;
			div {
				margin-bottom: 24px;
				// border:1px solid #1F2329;
				.left {
					display: inline-block;
					width: 120px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					color: #8f959e;
				}
				.right {
					// width:300px;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: normal;
					font-size: 14px;
				}
				.right_modify {
					color: var(--bl-brand-c);
					cursor: pointer;
				}
				ul {
					width: calc(100% - 200px);
					li:first-child {
						margin-top: 0;
					}
					li {
						display: flex;
						align-items: center;
						margin-top: 12px;
						span {
							display: inline-block;
						}
						.label {
							min-width: 32px;
							height: 16px;
							border-radius: 2px;
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 12px;
							line-height: 14px;
							color: #ffffff;
							text-align: center;
							margin-right: 7px;
							padding: 1px 4px;
						}
						.org-name {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 14px;
							line-height: 18px;
							color: #1f2329;
							max-width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.org-type {
							background: #ebf1ff;
							border-radius: 12px;
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 12px;
							line-height: 100%;
							color: #4c78fc;
							padding: 4px;
							box-sizing: border-box;
							margin-left: 6px;
						}
						.org-utype {
							font-family: 'PingFang SC';
							font-style: normal;
							font-weight: 400;
							font-size: 14px;
							line-height: 18px;
							color: #1f2329;
						}
						.org-id {
							font-style: normal;
							font-weight: 400;
							font-size: 14px;
							line-height: 18px;
							color: #8f959e;
						}
					}
				}
				&:last-child {
					margin-bottom: 0;
				}
				.avatar {
					display: flex;
					height: 98px;
					line-height: 98px;
					.left {
						line-height: 98px;
					}
					.right_avatar {
						display: flex;
						height: 98px;
						.right_avatar_img {
							position: relative;
							margin-top: 9px;
							margin-right: 24px;
							width: 80px;
							height: 80px;
							// border:1px solid #ccc;
							border-radius: 50%;
							.default {
								display: none;
							}

							img {
								width: 80px;
								height: 80px;
								border-radius: 50%;
							}
							div {
								width: 80px;
								height: 80px;
								line-height: 69px;
								border: 1px solid #ccc;
								border-radius: 50%;
								text-align: center;
								background: var(--bl-brand-c);
								font-size: 46px;
								color: #ffffff;
							}
						}
						.right_avatar_img:hover {
							width: 80px;
							height: 80px;
							.default {
								display: inline-block;
								width: 81px;
								height: 81px;
								position: absolute;
								top: 0%;
								left: 0%;
								background: rgba(0, 0, 0, 0.6);
								border-radius: 100%;
								text-align: center;
								line-height: 81px;
								font-size: 12px;
								color: @rok-white-bg;
								cursor: default;
							}
						}
						.right_avatar_update {
							height: 98px;
							.upload {
								margin-top: 19px;
								height: 32px;
								background: var(--bl-brand-c);
								border-radius: 4px;
								border: 0;
								cursor: pointer;
								color: #fff;
							}
							p {
								font-family: PingFang SC;
								font-style: normal;
								font-weight: normal;
								font-size: 12px;
								color: #8f959e;
							}
						}
					}
				}
			}
			.pwd-container {
				display: inline-block;
				margin-bottom: 0;
			}
			.icon_edit {
				display: inline-block;
				margin-left: 10.05px;
				width: 19.34px;
				height: 23.57px;
				vertical-align: middle;
				background-image: url(/public/icon/edit.svg);
			}
		}
	}
}
.phone {
	// margin-left: 23px;
	// margin-top: 25px;
	margin: 25px 0 7px 25px;
	font-family: PingFang SC;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	// line-height: 20px;
}
.newPwd {
	margin-left: 23px;
	margin-top: 5px;
	font-family: PingFang SC;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
}

.msg {
	height: 20px;
	color: red;
	margin-left: 23px;
}
.input_pwd {
	display: flex;
	justify-content: space-between;
	width: 380px;
	height: 40px;
	margin-left: 23px;
	background: #ffffff;
	/* 辅色/N300-组件边框 */
	outline: none;
	border: 1px solid #dee0e3;
	box-sizing: border-box;
	border-radius: 4px;
	padding-left: 10px;
	.pwd {
		width: 324px;
		border: none;
		outline: none;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		// color: #bbbfc4;
	}
	.icon_show {
		display: inline-block;
		margin-top: 17px;
		margin-right: 17px;
		width: 14px;
		height: 6px;
		vertical-align: middle;
		background-image: url(/public/icon/Vector.svg);
	}
}
.pwd-border {
	border-color: red;
}
.change-org-title {
	padding: 16px 24px;
	// background: var(--bl-brand-c);
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	span {
		color: #1f2329;
	}
	span:first-child {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 18px;
	}
	span:last-child {
		cursor: pointer;
		font-size: 24px;
		line-height: 18px;
		margin-top: -2px;
	}
}
</style>
